<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="user.phone" placeholder="请输入手机号" />
    </el-form-item>
    <!-- <div class="flex"> -->
      <el-form-item label="验证码" prop="code" class="codeiput">
        <el-input style="width:300px"
          v-model="user.code"
          auto-complete="off"
          placeholder="请输入短信验证码"
        />
        <span class="codebox">
          <span
            class="c_primary commhover"
            v-if="code == '获取验证码'"
            @click="codeEvent"
          >
            {{ code }}</span
          >
          <span v-else class="c_primary commhover">{{ code }}</span>
        </span>
      </el-form-item>
      
    <!-- </div> -->
    <div class="flexend">
      <el-button type="primary" size="small" @click="submit">保存</el-button>
      <el-button type="danger" size="small" @click="close">关闭</el-button>
    </div>
  </el-form>
</template>

<script>
import { sendCodeEditPhone } from "@/api/login";

export default {
  data() {
    const validPhone = (rule, value, callback) => {
      if (!/^1[0-9]{10}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      user: {
        phone: undefined,
        code: undefined
      },
      // 表单校验
      rules: {
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {validator: validPhone, trigger: "blur"}
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      code:'获取验证码'
    };
  },
  methods: {

    //封装验证码的函数
    codeEvent() {
      let iphone = this.user.phone
      let reg = /^1[0-9]{10}$/;
      if (!reg.test(iphone)) {
        this.$message({
          message: "请输入正确手机号!",
          type: "warning",
          offset: 150,
        });
      } else {
        sendCodeEditPhone({
          phone: iphone,
        }).then(() => {
          this.countDown(60);
        });
      }
    },
    //验证码倒计时
    countDown(time) {
      let _this = this;
      time--;
      if (time == 0) {
        _this.code = "获取验证码";
        return;
      }
      setTimeout(function () {
        _this.code = time + "秒";
        _this.countDown(time);
      }, 1000);
    },

    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$store.dispatch('EditPhone',this.user).then(res=>{
            this.$modal.msgSuccess("修改成功");
            this.close()
          })
        }
      });
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.codeiput{
    position: relative;
}
.codebox{
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 36px;
}
.codeline{
  display: inline-block;
  height: 27px;
  width: 1px;
  background-color: #EDF0F4;
  margin-right: 8px;
}
</style>